<template>
    <div class="suggest">
        <h3>搜索:{{keywords}}</h3>
        <ul>
            <template v-if="suggestList.artists">
                <li v-for="(v) in suggestList.artists" :key="v.id" @click="$emit('change',v.name)">
                    <i></i><span>{{v.name}}</span>
                </li>
            </template>
            <template v-if="suggestList.albums">
                <li v-for="(v) in suggestList.albums" :key="v.id" @click="$emit('change',v.name)" >
                    <i></i><span>{{v.name}}</span>
                </li>
            </template>
            <template v-if="suggestList.songs">
                <li v-for="(v) in suggestList.songs" :key="v.id" @click="$emit('change',v.name)">
                    <i></i><span>{{v.name}}<h2>{{v.artists[0].name}}</h2></span>
                </li>
            </template>
        </ul>
    </div>
</template>
<script>
    export default {
        name: "SearchSuggest",
        props:['keywords'],
        data(){
            return {
                suggestList:{}
            }
        },
        created(){
            this.loadSuggest(this.keywords);
        },
        watch:{
            keywords(val){
                this.loadSuggest(val);
            }
        },
        methods:{
            loadSuggest(val){
                this.$http.get("/search/suggest?keywords=" +val+"&type=mobile").then(data=>{
                    let result = data.data.result;
                    this.suggestList=result;
                })
            }
        }
    }

</script>
<style lang="less" scoped>
    .suggest{
        margin: 0 auto;
        display: block;
        h3{
            height: 50px;
            margin-left: 10px;
            padding-right: 10px;
            font-size: 15px;
            line-height: 50px;
            color: #507daf;
        }
        li{
            display: flex;
            align-items: center;
            height: 45px;
            padding-left: 10px;
            border-bottom: 1px solid #f1f2f3;
            i{
                width: 15px;
                height: 15px;
                background-image:url();
            }
            span{
                display: inline-block;
                flex: 1;
                width: 1%;
                padding-left: 10px;
                font-size: 15px;
                line-height: 45px;
                color: #333;
                position: relative;
                h2{
                    position: absolute;
                    right: 10px;
                    top: 0;
                }
            }
        }
    }

</style>